<template>
    <div class="box">
        <header class="headr">
            <span class="iconfont icon-iconfontjiantouzuo"></span>
            <input type="text" placeholder="请输入商品名称">
            <span class="iconfont icon-sandian-copy"></span>
        </header>
        <section class="lunbo">
            <ul class="swLft">
                <li v-for="(v,i) in lints" :key="i" @click="click(i)">
                    {{v}}
                </li>                       
            </ul>
            <swiper :options="swiperOption" ref="mySwiper" class="swRigt ">
                <swiper-slide class="wprs stop" v-for="(a,b) in tyw" :key="b">
                    <figure class="topimg">
                        <img :src="a.imgs" alt="">
                    </figure>
                    <section class="zhuhe" v-for="(c,d) in a.tyt" :key="d">
                        <figcaption class="timu">{{c.shangming}}</figcaption> 
                        <div v-for="(e,f) in c.aa" :key="f" class="jad">
                            <figure class="huitu">
                                <img :src="e.imgrt" alt="">
                            </figure>
                            <figcaption class="huizi">{{e.name}}</figcaption>
                        </div>
                    </section>
                </swiper-slide>
                <swiper-slide class="wprs stop" v-for="(a,b) in tyw" :key="b">
                    <figure class="topimg">
                        <img :src="a.imgs" alt="">
                    </figure>
                    <section class="zhuhe" v-for="(c,d) in a.tyt" :key="d">
                        <figcaption class="timu">{{c.shangming}}</figcaption> 
                        <div v-for="(e,f) in c.aa" :key="f" class="jad">
                            <figure class="huitu">
                                <img :src="e.imgrt" alt="">
                            </figure>
                            <figcaption class="huizi">{{e.name}}</figcaption>
                        </div>
                    </section>
                </swiper-slide>
                <swiper-slide class="wprs stop" v-for="(a,b) in tyw" :key="b">
                    <figure class="topimg">
                        <img :src="a.imgs" alt="">
                    </figure>
                    <section class="zhuhe" v-for="(c,d) in a.tyt" :key="d">
                        <figcaption class="timu">{{c.shangming}}</figcaption> 
                        <div v-for="(e,f) in c.aa" :key="f" class="jad">
                            <figure class="huitu">
                                <img :src="e.imgrt" alt="">
                            </figure>
                            <figcaption class="huizi">{{e.name}}</figcaption>
                        </div>
                    </section>
                </swiper-slide>
                <swiper-slide class="wprs stop" v-for="(a,b) in tyw" :key="b">
                    <figure class="topimg">
                        <img :src="a.imgs" alt="">
                    </figure>
                    <section class="zhuhe" v-for="(c,d) in a.tyt" :key="d">
                        <figcaption class="timu">{{c.shangming}}</figcaption> 
                        <div v-for="(e,f) in c.aa" :key="f" class="jad">
                            <figure class="huitu">
                                <img :src="e.imgrt" alt="">
                            </figure>
                            <figcaption class="huizi">{{e.name}}</figcaption>
                        </div>
                    </section>
                </swiper-slide>    
                
            </swiper>
           
        </section>


    </div>
</template>
<script>
export default {
  data() {
    return {
      lints: [
        "热门分类",
        "手机数码",
        "电脑办公",
        "电视影音",
        "空调冰洗",
        "厨卫电器",
        "生活电器",
        "食品酒水",
        "美妆个护",
        "母婴玩具",
        "医疗保健",
        "服饰鞋帽",
        "运动户外",
        "箱包奢品",
        "钟表首饰",
        "猪宅家居",
        "家装建材",
        "家居日用",
        "床品家纺",
        "汽车用品",
        "黄金收藏",
        "文化艺术",
        "智能家居",
        "金融理财",
        "生活服务"
      ],
      tyw: [
        {
          imgs: "http://gfs6.gomein.net.cn/T11nWgB7_T1RCvBVdK.jpg",
          tyt: [
            {
              shangming: "大家电",
              aa: [
                {
                  imgrt:
                    "http://img10.gomein.net.cn/image/prodimg/gicon/cat10000049.png",
                  name: "平板电视"
                },
                {
                  imgrt:
                    "http://img11.gomein.net.cn/image/prodimg/gicon/cat10000054.png",
                  name: "冰箱"
                },
                {
                  imgrt:
                    "http://img12.gomein.net.cn/image/prodimg/gicon/cat10000062.png",
                  name: "墙挂式空调"
                }
              ]
               
            },
            {
              shangming: "数码通讯",
              aa: [
                {
                  imgrt:
                    "http://img12.gomein.net.cn/image/prodimg/gicon/cat10000070.png",
                  name: "手机"
                },
                {
                  imgrt:
                    "http://img13.gomein.net.cn/image/prodimg/gicon/cat10000092.png",
                  name: "笔记本电脑"
                },
                {
                  imgrt:
                    "http://img14.gomein.net.cn/image/prodimg/gicon/cat10000145.png",
                  name: "单反相机"
                }
              ]
            },
            {
              shangming: "厨卫生活",
              aa: [
                {
                  imgrt:
                    "http://img10.gomein.net.cn/image/prodimg/gicon/cat10000234.png",
                  name: "电风扇"
                },
                {
                  imgrt:
                    "http://img11.gomein.net.cn/image/prodimg/promotion_image/promoImg/201504/20150430/cat10000230x.png",
                  name: "电子净化器"
                },
                {
                  imgrt:
                    "http://img12.gomein.net.cn/image/prodimg/gicon/cat10000203.png",
                  name: "微波炉"
                }
              ]
            },
            {
              shangming: "日用百货",
              aa: [
                {
                  imgrt:
                    "http://img13.gomein.net.cn/image/prodimg/gicon/cat16035542.png",
                  name: "啤酒"
                },
                {
                  imgrt:
                    "http://img14.gomein.net.cn/image/prodimg/gicon/cat21755542.png",
                  name: "品牌纸尿布"
                },
                {
                  imgrt:
                    "http://img10.gomein.net.cn/image/prodimg/gicon/cat10005460.png",
                  name: "床品件套"
                }
              ]
            }
          ]
        }
      ],
      swiperOption: {
        autoHeight: true, //enable auto height
        spaceBetween: 20,
        noSwiping: true,
        noSwipingClass:"stop",
        direction : 'vertical',
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    click(e) {
      var lis = document.querySelectorAll("li");
      //   console.log(this);
      for (var i = 0; i < lis.length; i++) {
        lis[i].className = "active";
      }
      this.swiper.slideTo(e, 1000, false);
      lis[e].className = "li";
    }
  }
};

</script>
<style scoped lang="less">
.px2rem(@name, @px) {
  @{name}: @px / 75 * 1rem;
}
.box {
  font-family: "微软雅黑";
  .headr {
    display: flex;
    align-items: center;
    .px2rem(height,100);
    width: 100%;
    border-bottom: 1px solid #ccc;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    span {
      width: 12%;
      height: 100%;
      .px2rem(font-size,46);
      text-align: center;
      line-height: 2.5;
    }
    input {
      flex: 1;
      .px2rem(height,66);
      border-radius: 50px;
      outline: none;
      background: #eee;
      color: #666;
      .px2rem(font-size,30);
      line-height: 2;
      .px2rem(padding-left,20);
      box-sizing: border-box;
    }
  }
  .lunbo {
    display: flex;
    justify-content: space-between;
    .px2rem(padding-top,100);
    .px2rem(padding-bottom,100);
    .swLft {
      width: 30%;
      height: 1200px;
      overflow: auto;
      background: #eee;
      li {
        width: 100%;
        .px2rem(height,130);
        .px2rem(font-size,38);
        text-align: center;
        line-height: 3.2;
        color:red;
        border-bottom: 1px solid #ccc;
         border-left: 8px solid red;
          box-sizing: border-box;
       } 
       .active{
            border-left: none;
            color: #999;
         
       }
    }
    .swRigt {
      width: 70%;
      display: flex;
      height: 1200px;
      overflow: auto;
      .wprs {
        .topimg {
          .px2rem(height,180);
          img {
            width: 100%;
            .px2rem(height,180);
          }
        }
        .zhuhe {
          display: flex;
          flex-wrap: wrap;
          .timu {
            width: 100%;
            .px2rem(font-size,28);
            color: #ccc;
            line-height: 2;
            .px2rem(padding-left,10);
            box-sizing: border-box;
          }
          .jad {
            flex: 1;
            .px2rem(height,240);
            display: flex;
            flex-direction: column;
            background: #eee;
            .huitu {
              .px2rem(height,200);
              text-align: center;
              img {
                width: 90%;
                .px2rem(height,190);
              }
            }
            .huizi {
              .px2rem(height,40);
              .px2rem(font-size,28);
              color: #555;
              text-align: center;
            }
          }
        }
      }
    }
  }



  
}
</style>
